<template>
  <div class="mainDiv">
    <el-container class="main_container">
    <el-main>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-card style="margin-bottom: 15px;">
          <div slot="header" class="clearfix">
            <span>车辆信息</span>
          </div>
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item label="承运商" prop="carrierId">
                <el-select v-model="form.carrierId" placeholder="请选择承运商" class="input-width" :disabled="!form.isShow">
                <el-option v-for="item in carrierOptions" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="部门" prop="deptId">
                <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="部门"
                  class="input-width" size="small" />
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="车牌号" prop="carNumber">
                <el-input v-model="form.carNumber" placeholder="请输入车牌号" class="input-width"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车牌颜色" prop="plateColor">
                <el-select v-model="form.plateColor" placeholder="请选择车牌颜色" class="input-width">
                  <el-option v-for="dict in dict.type.tms_plate_color" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆类型" prop="carType">
                <el-select v-model="form.carType" placeholder="请选择车辆类型" class="input-width">
                  <el-option v-for="item in carTypeOptions" :key="item.id" :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">

            <!-- <el-col :span="6">
              <el-form-item label="合作类型" prop="cooperation">
                <el-select v-model="form.cooperation" placeholder="请选择合作类型" class="input-width">
                  <el-option v-for="dict in dict.type.tms_car_cooperation_type" :key="dict.value" :label="dict.label"
                    :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="所有人" prop="ownerName">
                <el-input v-model="form.ownerName" placeholder="请输入所有人" class="input-width" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="VIN" prop="vin">
                <el-input v-model="form.vin" placeholder="请输入车辆识别代号(VIN)" class="input-width" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆状态">
                <el-radio-group v-model="form.status">
                  <el-radio v-for="dict in dict.type.tms_car_status" :key="dict.value" :label="dict.value">{{dict.label}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
      </el-card>
      <el-card>
        <div slot="header" class="clearfix">
          <span>档案信息</span>
        </div>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="发动机号码" prop="engineNo">
              <el-input v-model="form.engineNo" placeholder="请输入发动机号码" class="input-width" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="能源类型" prop="energyType">
              <el-select v-model="form.energyType" placeholder="请选择能源类型" class="input-width">
                <el-option v-for="dict in dict.type.tms_energy_type" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="使用性质" prop="useCharacter">
              <el-select v-model="form.useCharacter" placeholder="请选择使用性质" class="input-width">
                <el-option v-for="dict in dict.type.tms_use_character" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总质量" prop="totalMass">
              <el-input v-model="form.totalMass" placeholder="请输入总质量" class="input-width"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="核定载人数" prop="passenger">
              <el-input v-model="form.passenger" placeholder="请输入核定载人数" class="input-width"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="核定载质量(kg)" prop="tonnage">
              <el-input v-model="form.tonnage" placeholder="请输入核定载质量(kg)" class="input-width"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
           <el-form-item label="准牵引总质量(kg)" prop="tractionMass">
             <el-input v-model="form.tractionMass" placeholder="请输入准牵引总质量(kg)" class="input-width"/>
           </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="整备质量(kg)" prop="unladenMass">
              <el-input v-model="form.unladenMass" placeholder="请输入整备质量(kg)" class="input-width"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="6">
            <el-form-item label="注册日期" prop="registerDate">
              <el-date-picker v-model="form.registerDate" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择注册日期" class="input-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证机关" prop="licenseOrgan">
              <el-input v-model="form.licenseOrgan" placeholder="请输入发证机关" class="input-width"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发证日期" prop="grantDate">
              <el-date-picker v-model="form.grantDate" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择发证日期" class="input-width">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
           <el-form-item label="档案编号" prop="fileNo">
             <el-input v-model="form.fileNo" placeholder="请输入档案编号" class="input-width"/>
           </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="备注" style="width: 76vw;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="行驶证正面" prop="vehicleFrontImg">
              <image-upload v-model="form.vehicleFrontImg" :limit="1"></image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行驶证背面" prop="vehicleBackImg">
              <image-upload v-model="form.vehicleBackImg" :limit="1"></image-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆照片" prop="vehicleImg">
              <image-upload v-model="form.vehicleImg" ref="imgUpload"></image-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    </el-main>
    <el-footer>
      <div class="footerDivClass">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
  import { getCar, addCar, updateCar,initBean } from "@/api/tms/car";
  import {listCarrier} from '@/api/tms/carrier';
  import {treeselect} from '@/api/system/dept';
  import {listCarType} from '@/api/tms/carType'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    dicts: ['tms_energy_type', 'tms_car_type', 'sys_del_flag', 'tms_car_status', 'tms_plate_color','tms_car_cooperation_type','tms_use_character'],
    components: {
        Treeselect
    },
    data(){
      return{
        carrierOptions:[],
        deptOptions:[],
        carTypeOptions:[],

        // 表单参数
        form: {},

        // 表单校验
        rules: {
          carrierId: [
            { required: true, message: "承运商不能为空", trigger: "blur" }
          ],
          carNumber: [
            { required: true, message: "车牌号不能为空", trigger: "blur" }
          ],
          // carType: [
          //   { required: true, message: "车辆类型不能为空", trigger: "change" }
          // ],
          plateColor: [
            { required: true, message: "车牌颜色不能为空", trigger: "change" }
          ],
          // cooperation: [
          //   { required: true, message: "合作类型不能为空", trigger: "blur" }
          // ],
          // ownerName: [
          //   { required: true, message: "所有人不能为空", trigger: "blur" }
          // ],
          // vin: [
          //   { required: true, message: "车辆识别代号(VIN)不能为空", trigger: "blur" }
          // ],
          // grantDate: [
          //   { required: true, message: "发证日期不能为空", trigger: "blur" }
          // ],
          deptId: [
            { required: true, message: "所属机构id不能为空", trigger: "blur" }
          ],
          // fileNo: [
          //   { required: true, message: "档案编号不能为空", trigger: "blur" }
          // ],
        }

      }
    },
    created() {
      this.reset();
      this.getCarrier();
      this.getTreeselect();
      this.getCarType();
       const id = this.$router.currentRoute.params.id;
       if(id != undefined && id != ''){
         this.getCarInfo(id)
       }else{
         this.getInit();
       }
    },
    methods:{
      getInit(){
        initBean().then(response=>{
          this.form = response.data;
        })
      },
      getCarInfo(id){
        getCar(id).then(response=>{
          this.form = response.data;
        })
      },
      /**查询承运商列表 */
      getCarrier(){
        listCarrier().then(response=>{
          this.carrierOptions = response.rows;
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
          treeselect().then(response => {
            this.deptOptions = response.data;
          });
      },
      getCarType(){
        listCarType().then(response=>{
          this.carTypeOptions = response.rows;
        })
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          carrierId: undefined,
          carNumber: undefined,
          carType: undefined,
          plateColor: undefined,
          cooperation: undefined,
          ownerName: undefined,
          licenseOrgan: undefined,
          vin: undefined,
          engineNo: undefined,
          grantDate: undefined,
          totalMass: undefined,
          energyType: undefined,
          passenger: undefined,
          tonnage: undefined,
          tractionMass: undefined,
          unladenMass: undefined,
          remark: undefined,
          status: "0",
          delFlag: undefined,
          deptId: undefined,
          deptName: undefined,
          useCharacter: undefined,
          registerDate: undefined,
          vehicleFrontImg: undefined,
          vehicleBackImg: undefined,
          vehicleImg: undefined,
          fileNo: undefined,
          createBy: undefined,
          updateBy: undefined,
          createTime: undefined,
          updateTime: undefined
        };
        this.resetForm("form");
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/car",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            this.form.oss = this.$refs['imgUpload'].pics;
            if (this.form.id != null) {
              updateCar(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
               this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addCar(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
